<template>
  <div>
    <el-table
      :data="securityList"
      style="width: 100%"
      class="role_table"
      ref="securityTable"
      highlight-current-row
      border
      height="313"
    >
      <el-table-column type="index" label="序号" width="100" align="center">
      </el-table-column>
      <el-table-column
        label="创建日期"
        width="200"
        align="center"
        property="create_time"
      ></el-table-column>
      <el-table-column
        label="用户名"
        width="200"
        align="center"
        property="username"
      ></el-table-column>
      <el-table-column
        label="用户角色"
        width="200"
        align="center"
        property="role_id"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.role_id | role(roleList) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="200"
        align="center"
        property="name"
      ></el-table-column>
      <el-table-column
        label="手机号"
        width="200"
        align="center"
        property="phone"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentPage"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import cellApi from "@/api/cell";
import roleApi from "@/api/roles";
import dayjs from "@/utils/dayjs.min.js";
export default {
  data() {
    return {
      _id: null,
      total: 0,
      size: 5, //当前页个数
      currentPage: 1, //当前页
      currentRow: null, //当前行信息
      securityList: [], //存储安保列表
      roleList: [], //角色列表
      
    };
  },
  filters: {
    role(_id, roleList) {
      // console.log(roleList);
      const obj = roleList.find((obj) => obj._id === _id);
      return obj ? obj.name : null;
    },
  },
  components: {},
  mounted() {
    this.condition();
    this.getRole();
  },
  methods: {
    // 获取角色列表
    getRole() {
      roleApi.getRolesList().then((response) => {
        const res = response.data;
        if (res.status == 0) {
          this.roleList = res.data;
        }
      });
    },
    // 获取分页信息
    condition() {
      cellApi.getUser(this.currentPage, this.size).then((response) => {
        const res = response.data;
        if (res.status == 0) {
          this.total = res.data.total - 1;
          console.log(res.data.data)
          if (res.data.data) {
            res.data.data.map((item) => {
              item.create_time = dayjs(item.create_time).format("YYYY-MM-DD");
            });
          }

          this.securityList = res.data.data;
          if (this.securityList == 0) {
            this.currentPage = this.currentPage - 1;
            this.condition();
          }
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 改变当前页位置
    handleCurrentPage(currentPage) {
      this.currentPage = currentPage;
      // console.log(currentPage);
      this.condition();
    },
    // 每页条数
    handleSizeChange(size) {
      // console.log(size);
      this.size = size;
      this.condition();
    },
    // 自带函数获取当前点击行，获取两个参数，一个当前点击的一个为上一次点击的行
    // handleCurrentChange(val) {
    //   console.log(val);
    //   this.currentRow = val;
    // },
    // 删除
    handleDelete(index, row) {
      // console.log(index, row);
      cellApi.delete(row).then((response) => {
        const res = response.data;
        // console.log(res);
        if (res.status == 0) {
          this.$message({
            message: res.data,
            type: "success",
          });
          this.condition();
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>

<style scoped></style>